<template>
	<div class="bg-white">
		<!-- 客户详情基础信息卡片 -->
		<div class="m-2 shadow rounded">
			<div class="bg-primary p-2 d-flex justify-content-between align-items-center">
				<span class="text-white">基础数据</span>
				<Button @click="jjsubmit" type="success" size="small">保存</Button>
			</div>
			<div class="p-2">
				<Form :label-width="80">
					<Row class="w-100">
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="编号">
							<Input v-model="client.clientid" disabled></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="昵称">
							<Input v-model="client.nc"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="性别">
							<div>
								<span v-if="client.sex == '1'">男</span>
								<span v-if="client.sex == '2'">女</span>
							</div>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="头像">
							<input @change="changeFile" id="fjcover" class="d-none" type="file" />
							<label for="fjcover" class="btn btn-primary">选择文件</label>
							<img :src="client.headimg" />
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="电话">
							<Input v-model="client.tel"></Input>
						</FormItem>
						</Col>
						<!-- 					<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="OPENID">
							<Input v-model="client.openid" disabled></Input>
						</FormItem>	
					</Col> -->
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="余额">
							<Input v-model="client.deposit_amount" disabled></Input>
						</FormItem>
						</Col>
					</Row>
				</Form>
			</div>

			<!-- 客户详情会员信息卡片 -->
			<div class="m-2 shadow rounded">
				<div class="bg-primary p-2 d-flex justify-content-between align-items-center">
					<span class="text-white">会员信息</span>
					<!-- <Button @click="hysubmit" type="success" size="small">保存</Button> -->
				</div>
				<div class="p-2">
					<div class="mt-1">
						<Table border :class="'m-1'" :columns="hytableInfo.columnInfo" :data="hytableInfo.data">
							<template slot-scope="{ row, index }" slot="headimg">
								<div>
									<img style="width: 40px; height: 40px;" :src="row.headimg" />
								</div>
							</template>
							<template slot-scope="{ row, index }" slot="clientName">
								<div>{{ row.clientName }}</div>
							</template>

						</Table>
					</div>
					<div>
						<Page class="text-right mt-3" :page-size="hytableInfo.pageSize" @on-change="hypageSearch"
							:total="hytableInfo.total" />
					</div>
				</div>
			</div>
			<!-- 客户详情订单信息卡片 -->
			<div class="m-2 shadow rounded">
				<div class="bg-primary p-2 d-flex justify-content-between align-items-center">
					<span class="text-white">订单信息</span>
					<!-- <Button @click="ddsubmit" type="success" size="small">保存</Button> -->
				</div>
				<div class="p-2">
					<div class="mt-1">
						<Table border :class="'m-1'" :columns="ddtableInfo.columnInfo" :data="ddtableInfo.data">
							<template slot-scope="{ row, index }" slot="headimg">
								<div>
									<img style="width: 40px; height: 40px;" :src="row.headimg" />
								</div>
							</template>
							<template slot-scope="{ row, index }" slot="clientName">
								<div>{{ row.clientName }}</div>
							</template>
						</Table>
					</div>
					<div>
						<Page class="text-right mt-3" :page-size="ddtableInfo.pageSize" @on-change="ddpageSearch"
							:total="ddtableInfo.total" />
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 客户表
				client: {
					clientid: "",
					nc: "",
					sex: "",
					headimg: "",
					tel: "",
					openid: "",
					deposit_amount: "",
					from: "",
				},
				// 会员表
				hy: {
					vipid: "",
					storeid: "",
					clientid: "",
					clientName: "",
					productid: "",
					st: "",
					et: "",
					zsc: "",
					sysc: "",
				},
				// 会员列表
				hysearchKey: {
					vipid: "",
					storeid: "",
					clientid: "",
					clientName: "",
					productid: "",
					st: "",
					et: "",
					zsc: "",
					sysc: "",
				},
				hytableInfo: {
					currentPage: 1,
					pageSize: 5,
					total: 0,
					columnInfo: [{
							title: "会员编号",
							key: "vipid",
						},
						{
							title: "所属门店",
							key: "storeid",
						},
						{
							title: "客户id",
							key: "clientid",
						},
						{
							title: "客户姓名",
							slot: "clientName",
						},
						{
							title: "开始时间",
							key: "st",
						},

						{
							title: "结束时间",
							key: "et",
						},
						{
							title: "总分钟数",
							key: "zsc",
						},
						{
							title: "剩余分钟数",
							key: "sysc",
						}
					],
					data: [],
				},
				//订单列表
				ddsearchKey: {
					orderid: "",
					openid: "",
					nickname: "",
					clientName: "",
					age: "",
					headimg: "",
					from: "",
					tel: "",
					goodName: "",
				},
				ddtableInfo: {
					currentPage: 1,
					pageSize: 5,
					total: 0,
					columnInfo: [{
							title: "订单编号",
							key: "orderid",
						},
						{
							title: "门店id",
							key: "storeid",
						},
						{
							title: "客户id",
							key: "clientid",
						},
						{
							title: "客户姓名",
							slot: "clientName",
						},
						{
							title: "商品id",
							key: "productid",
						},
						{
							title: "商品价格",
							key: "productPrice",
						},
						{
							title: "商品名称",
							key: "productName",
						},
						{
							title: "数量",
							key: "count",
						},
						{
							title: "实付款",
							key: "amount",
						}
					],
					data: []
				},

			}
		},
		created: function() {
			this.client.clientid = this.$route.query.id;
			this.hy.clientid = this.$route.query.id;
			// this.hyinit();
			// this.ddinit();
			// this.loadData();
			 this.ddinit().then(() => this.hyinit()).then(() => this.loadData());
			
		},
		mounted: function() {},
		methods: {
			loadData: function() {
				return this.http.get({
					url: "/kh/info",
					param: {
						clientid: this.client.clientid
					}
				}).then(res => {
					this.client = res;
				});
			},
			loadHy: function() {
				return this.http.get({
					url: "/hy/info",
					param: {
						clientid: this.client.clientid
					}
				}).then(res => {
					console.log('会员信息接口返回数据:', res);
					this.hy = res;
				});
			},
			changeFile: function(event) {
				console.log(event.target.files);
				if (event.target.files && event.target.files.length > 0) {
					this.loadFile(event.target.files[0]);
				}
			},
			loadFile: function(file) {
				const reader = new FileReader();
				reader.onload = e => {
					const content = e.target.result;
					// 处理文件内容
					// this.$emit("success", content);
					console.log(content);

					this.client.headimg = content;
				};
				reader.onerror = function(e) {
					console.error("读取文件时发生错误:", e.target.error);
				};
				reader.readAsDataURL(file);



				this.http.uploadFile({
					path: "/kh/cover/",
					file,
					onProgress: progressData => {
						console.log(progressData);
					}
				}).then(res => {
					console.log(res);
				});

			},
			jjsubmit: function() {

			},
			//会员列表
			// hyinit: function() {
			// 	this.hytableInfo.currentPage = 0;
			// 	this.hysearch();
			// },
			hyinit: function() {
			    return new Promise((resolve) => {
			        this.hytableInfo.currentPage = 0;
			        this.hysearch();
			        resolve();
			    });
			},
			hysearchs: function() {
				this.hytableInfo.currentPage = 1;
				this.hysearch();
			},
			hysearch() {
				const params = {
					current: this.hytableInfo.currentPage,
					size: this.hytableInfo.pageSize
				};
				console.log('会员列表请求参数:', params);
				this.http.get({
					url: '/hy/page',
					param: params
				}).then(data => {
					console.log('会员列表接口返回数据:', data);
					this.hytableInfo.data = data.records.slice(0, this.hytableInfo.pageSize); // 只取前5条
					this.hytableInfo.currentPage = data.current;
					this.hytableInfo.total = data.total;
				});
			},
			hypageSearch: function(changedPage) {
				this.hytableInfo.currentPage = changedPage;
				this.hysearch();
			},
			hysubmit: function() {

			},
			//订单列表
			// ddinit: function() {
			// 	this.ddtableInfo.currentPage = 0;
			// 	this.ddsearch();
			// },
			ddinit: function() {
			    return new Promise((resolve) => {
			        this.ddtableInfo.currentPage = 0;
			        this.ddsearch();
			        resolve();
			    });
			},
			ddsearchs: function() {
				this.ddtableInfo.currentPage = 1;
				this.search();
			},
			ddsearch() {
				const params = {
					current: this.ddtableInfo.currentPage,
					size: this.ddtableInfo.pageSize
				};
				console.log('订单列表请求参数:', params);
				this.http.get({
					url: '/dd/page',
					param: params
				}).then(data => {
					console.log('订单列表接口返回数据:', data);
					this.ddtableInfo.data = data.records.slice(0, this.ddtableInfo.pageSize); // 只取前5条
					this.ddtableInfo.currentPage = data.current;
					this.ddtableInfo.total = data.total;
				});
			},
			ddpageSearch: function(changedPage) {
				this.ddtableInfo.currentPage = changedPage;
				this.search();
			},
			ddsubmit: function() {

			},
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
	}
</script>

<style>
</style>